<template>
  <view class="task-page">
    <up-sticky>
      <view class="task-head">
        <up-tabs :list="list1" lineColor="linear-gradient(90deg, #A4682F 0%, transparent 100%)" lineHeight="16rpx"
          lineWidth="96rpx" :activeStyle="{
          color: '#333333', 
          fontWeight: '500',
          fontSize:'32rpx'}" :inactiveStyle="{
           color: '#666666',
           fontWeight: '400',
           fontSize:'28rpx'}" @click="onTaskClick"></up-tabs>
        <view class="head-boxs">
          <view :class="statusActive === item.id ?'box-active':'box-nav'" v-for="item,index in statusList"
            :key="item.id" @click="onstatus(item.id)">{{item.name}}</view>
        </view>
      </view>
    </up-sticky>
    <view class="task-content">
      <mescroll-uni @init="mescrollInit" @down="downCallback" @up="upCallback" :fixed="false">
        <view class="content-nav" v-for="item,index in orderList" :key="item.id" @click="ondetail(item.id)">
          <view class="nav-head">
            <view class="head-avatar">
              <image :src="item.category.image" mode="widthFix"></image>
              <view class="head-name">{{item.category.name}}</view>
            </view>
            <view class="head-image" v-show="item.status ==2">
              <image src="@/static/home/image/truth.png" mode="" v-show="item.label ==1"></image>
              <image src="@/static/home/image/fake.png" mode="" v-show="item.label ==-1"></image>
              <image src="@/static/home/image/question.png" mode="" v-show="item.label ==2"></image>
            </view>
            <view class="head-btn" v-show="item.status ==1" @click="toIdentify(item.id)">去鉴定</view>
          </view>
          <view class="nav-main">
            <view class="main-title">{{item.desc}}</view>
            <view class="main-images">
              <image :src="ite.image" mode="" v-for="ite,ind in item.task_image" :key="ite.category_id"
                class="main-img">
              </image>
            </view>
            <view class="main-label">
              <image :src="item.user.avatar" mode="" class="label-avatar"></image>
              <view class="label-name">{{item.user.nickname}}</view>
              <view class="label-timer">{{item.create_time}}</view>
            </view>
          </view>
        </view>
      </mescroll-uni>
    </view>
  </view>
</template>

<script setup>
  import {
    taskList
  } from './api.js'
  import {
    ref,
    reactive,
    nextTick
  } from 'vue'
  import {
    onLoad,
    onShow,
    onPageScroll,
    onReachBottom
  } from '@dcloudio/uni-app';
  import useMescroll from "@/uni_modules/mescroll-uni/hooks/useMescroll.js"
  const {
    mescrollInit,
    downCallback,
    getMescroll
  } = useMescroll(onPageScroll, onReachBottom)
  const orderList = ref([])
  const current = ref(1)
  const list1 = reactive([{
      name: '未处理',
      id: 1
    },
    {
      name: '已处理',
      id: 2
    }
  ]);
  const statusActive = ref()
  const statusList = ref([])
  onLoad(() => {
    statusList.value = uni.getStorageSync('categoryList')
    statusActive.value = uni.getStorageSync('categoryList')[0].id
  })
  onShow(() => {
    nextTick(() => {
      downCallback()
    })
  })

  function onstatus(id) {
    statusActive.value = id
    orderList.value = []
    downCallback()
  }

  function onTaskClick(e) {
    current.value = e.id
    orderList.value = []
    downCallback()
  }

  function toIdentify(id) {
    uni.navigateTo({
      url: `/pages/index/identifyPage/identifyExport?id=${id}`
    })
  }

  function ondetail(id) {
    if (current.value == 2) {
      uni.navigateTo({
        url: `/pages/index/identifyPage/identifyResult?id=${id}`
      })
    }
  }

  const upCallback = (mescroll) => {
    taskList({
      category_id: statusActive.value,
      type: current.value,
      page: mescroll.num
    }).then(res => {
      const curPageData = res.data.data || [] // 当前页数据
      if (mescroll.num == 1) orderList.value = []; // 第一页需手动制空列表      
      orderList.value = orderList.value.concat(curPageData); //追加新数据
      const totalPage = res.data.total
      mescroll.endByPage(curPageData.length, totalPage); //必传参数(当前页的数据个数, 总页数)
      mescroll.endSuccess(curPageData.length)
    }).catch(() => {
      mescroll.endErr()
    })
  }
</script>

<style lang="scss" scoped>
  .task-page {
    height: 100%;
    display: flex;
    flex-direction: column;
    width: 100%;

    .task-head {
      background-color: #fff;
      display: flex;
      flex-direction: column;

      ::v-deep .u-tabs__wrapper__nav__line {
        border-radius: 0;
        bottom: 16rpx;
      }

      ::v-deep .u-tabs__wrapper__nav__item {
        padding: 0 24rpx;
        flex: 1;
        z-index: 1;

      }

      .head-boxs {
        width: 100%;
        height: 96rpx;
        opacity: 1;
        background: #FFFFFF;
        border-top: 2rpx solid #EBEBEB;
        display: flex;
        align-items: center;
        box-sizing: border-box;
        padding: 0 30rpx;
        overflow: scroll;

        .box-nav {
          height: 56rpx;
          border-radius: 342rpx;
          background: #F2F2F2;
          display: flex;
          justify-content: center;
          align-items: center;
          box-sizing: border-box;
          padding: 0 40rpx;
          font-size: 28rpx;
          font-weight: 400;
          color: rgba(51, 51, 51, 1);
          margin-right: 16rpx;
          flex: 0 0 auto;
        }

        .box-active {
          height: 56rpx;
          border-radius: 342rpx;
          background: #A4682F;
          display: flex;
          justify-content: center;
          align-items: center;
          box-sizing: border-box;
          padding: 0 40rpx;
          font-size: 28rpx;
          font-weight: 400;
          color: #fff;
          background: #A4682F;
          margin-right: 16rpx;
          flex: 0 0 auto;
        }
      }
    }

    .task-content {
      flex: 1;
      overflow: scroll;
      display: flex;
      flex-direction: column;
      box-sizing: border-box;
      padding: 30rpx;

      .content-nav {
        width: 100%;
        border-radius: 16rpx;
        background: #FFFFFF;
        box-sizing: border-box;
        padding: 0 30rpx;
        margin-bottom: 24rpx;

        .nav-head {
          width: 100%;
          height: 104rpx;
          display: flex;
          align-items: center;
          justify-content: space-between;
          border-bottom: 2rpx solid #EBEBEB;
          position: relative;

          .head-avatar {
            display: flex;
            align-items: center;

            image {
              height: 56rpx;
              width: 56rpx;
            }

            .head-name {
              margin-left: 10rpx;
              font-size: 32rpx;
              font-weight: 400;
              color: rgba(51, 51, 51, 1);
            }
          }

          .head-image {
            position: absolute;
            top: 20rpx;
            right: 6rpx;
            z-index: 1;
            width: 112rpx;
            height: 112rpx;
            border-radius: 50%;

            image {
              width: 112rpx;
              height: 112rpx;
            }
          }

          .head-btn {
            width: 144rpx;
            height: 56rpx;
            opacity: 1;
            border-radius: 44rpx;
            border: 2rpx solid #A4682F;
            font-size: 24rpx;
            font-weight: 400;
            color: rgba(164, 104, 47, 1);
            display: flex;
            align-items: center;
            justify-content: center;

          }
        }

        .nav-main {
          width: 100%;
          opacity: 1;
          display: flex;
          flex-direction: column;
          box-sizing: border-box;
          padding: 30rpx 0;

          .main-title {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            font-size: 28rpx;
            font-weight: 400;
            color: rgba(51, 51, 51, 1);

          }

          .main-images {
            margin-top: 24rpx;
            display: flex;
            width: 100%;

            .main-img {
              height: 144rpx;
              width: 144rpx;
              margin-right: 16rpx;
              border-radius: 20rpx;
              flex: 0 0 auto;
              border: 2rpx solid rgba(235, 235, 235, 1);
            }
          }

          .main-label {
            margin-top: 30rpx;
            display: flex;
            align-items: center;

            .label-avatar {
              height: 40rpx;
              width: 40rpx;
              border-radius: 50%;
            }

            .label-name {
              flex: 1;
              margin-left: 12rpx;
              font-size: 28rpx;
              font-weight: 400;
              color: rgba(51, 51, 51, 1);

            }

            .label-timer {
              font-size: 24rpx;
              font-weight: 400;
              color: rgba(153, 153, 153, 1);

            }
          }
        }
      }
    }
  }
</style>